<template>
  <div class="vant-tab">
    <van-tabs v-model="active" :line-width="30">
      <van-tab v-for="(item,index) in tabbars" :key="index" :to="item.name" :title="item.title"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      tabbars: [
        {
          name: "recommend",
          title: "推荐"
        },
        {
          name: "singer",
          title: "歌手"
        },
        {
          name: "rank",
          title: "排行"
        },
        {
          name: "search",
          title: "搜索"
        }
      ],
      active: 0
    };
  },

  watch: {
    $route(to, from) {
      for (var i = 0; i < this.tabbars.length; i++) {
        if (this.tabbars[i].name === this.$route.name) {
          this.active = i;
        }
      }
    }
  }
};
</script>

<style lang="less">
.vant-tab {
  position: relative;
  z-index: 66;
}
.van-tabs__nav {
  background-color: transparent;
}
[class*="van-hairline"]::after {
  border: none;
}
.van-tab {
  color: rgba(255, 255, 255, 0.5);
}
.van-tab--active {
  color: @mc;
}
.van-tabs__line {
  background-color: @mc;
  height: 2px;
}
</style>